<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Base 基础 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col-md">
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            默认
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <form class="e-form">
                        <div class="form-group row">
                            <label class="col-form-label col-2" for="example-text">
                                文本框：
                            </label>
                            <div class="col-10">
                                <input type="text" class="form-control" id="example-text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2" for="example-password">
                                密码框：
                            </label>
                            <div class="col-10">
                                <input type="password" class="form-control" id="example-password">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2" for="example-select">
                                下拉框：
                            </label>
                            <div class="col-10">
                                <select class="form-control" id="example-select">
                                    <option value="1">选项1</option>
                                    <option value="2">选项2</option>
                                    <option value="3">选项3</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2" for="example-select-multiple">
                                多选下拉框：
                            </label>
                            <div class="col-10">
                                <select class="form-control" id="example-select-multiple" multiple>
                                    <option value="1">选项1</option>
                                    <option value="2">选项2</option>
                                    <option value="3">选项3</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2" for="example-textarea">
                                文本域：
                            </label>
                            <div class="col-10">
                                <textarea id="example-textarea" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2">
                                文本：
                            </label>
                            <div class="col-10">
                                <span class="form-control form-control-static">文本</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2">
                                链接：
                            </label>
                            <div class="col-10">
                                <a href="#" class="form-control form-control-static e-link">链接</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            状态
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <form class="e-form">
                        <div class="e-section">
                            <div class="e-section-info">Disable状态的控件</div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-disabled-text">
                                        文本框：
                                    </label>
                                    <div class="col-10">
                                        <input type="text" class="form-control" id="example-disabled-text" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-disabled-password">
                                        密码框：
                                    </label>
                                    <div class="col-10">
                                        <input type="password" class="form-control" id="example-disabled-password" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-disabled-select">
                                        下拉框：
                                    </label>
                                    <div class="col-10">
                                        <select class="form-control" id="example-disabled-select" disabled>
                                            <option value="1">选项1</option>
                                            <option value="2">选项2</option>
                                            <option value="3">选项3</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-disabled-select-multiple">
                                        多选下拉框：
                                    </label>
                                    <div class="col-10">
                                        <select class="form-control" id="example-disabled-select-multiple" multiple disabled>
                                            <option value="1">选项1</option>
                                            <option value="2">选项2</option>
                                            <option value="3">选项3</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-disabled-textarea">
                                        文本域：
                                    </label>
                                    <div class="col-10">
                                        <textarea id="example-disabled-textarea" class="form-control" disabled></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>
                            <div class="e-section-info">Readonly状态的控件</div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-readonly-text">
                                        文本框：
                                    </label>
                                    <div class="col-10">
                                        <input type="text" class="form-control" id="example-readonly-text" readonly>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-readonly-password">
                                        密码框：
                                    </label>
                                    <div class="col-10">
                                        <input type="password" class="form-control" id="example-readonly-password" readonly>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-2" for="example-readonly-textarea">
                                        文本域：
                                    </label>
                                    <div class="col-10">
                                        <textarea id="example-readonly-textarea" class="form-control" readonly></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            HTML5 控件
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <form class="e-form">
                        <div class="form-group row">
                            <label class="col-2 col-form-label" for="example-datetime-local-input">日期和时间：</label>
                            <div class="col-10">
                                <input class="form-control" type="datetime-local" value="2019-01-01T00:00:00"
                                       id="example-datetime-local-input">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label" for="example-date-input">日期：</label>
                            <div class="col-10">
                                <input class="form-control" type="date" value="2019-01-01" id="example-date-input">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label" for="example-month-input">月份：</label>
                            <div class="col-10">
                                <input class="form-control" type="month" value="2019-01" id="example-month-input">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label" for="example-week-input">周：</label>
                            <div class="col-10">
                                <input class="form-control" type="week" value="2019-W01" id="example-week-input">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label" for="example-time-input">时间：</label>
                            <div class="col-10">
                                <input class="form-control" type="time" value="00:00:00" id="example-time-input">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label" for="example-color-input">颜色：</label>
                            <div class="col-10">
                                <input class="form-control" type="color" value="#000" id="example-color-input">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label" for="example-range-input">滑动：</label>
                            <div class="col-10">
                                <input class="form-control" type="range" value="0" id="example-range-input">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            尺寸
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>你可以在input上添加<code>.col-form-label-sm</code>或<code>.col-form-label-lg</code>设置不同的尺寸</p>
                    <form class="e-form">
                        <div class="form-group row">
                            <label class="col-form-label col-form-label-sm col-2" for="example-sm-text">
                                文本框：
                            </label>
                            <div class="col-10">
                                <input type="text" class="form-control form-control-sm" id="example-sm-text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2" for="example-default-text">
                                文本框：
                            </label>
                            <div class="col-10">
                                <input type="text" class="form-control" id="example-default-text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-form-label-lg col-2" for="example-lg-text">
                                文本框：
                            </label>
                            <div class="col-10">
                                <input type="text" class="form-control form-control-lg" id="example-lg-text">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>